<template>
    <div class="my-carousel">
        <div class="title">
            <div class="title-left">
                <img alt="" src="/img/slices/logo.png"/>
                <div style="font-size: 16px; font-weight: bold;color: #DFEEF3;">{{ form.title }}</div>
            </div>
            <div class="title-right">
                <div>在线率&nbsp;<span>{{ form.online_ratio }}</span>&nbsp;%</div>
            </div>
        </div>
        <div class="main">
            <el-carousel :interval="5000" arrow="never" :indicator-position="form.indicator_position">
                <!-- 遍历 paginatedData，生成每个分页的 el-carousel-item -->
                <el-carousel-item v-for="(page, pageIndex) in paginatedData" :key="pageIndex">
                    <!-- 遍历每个分页的 page，生成每个 card，并绑定唯一类名 -->
                    <div class="card-box">
                        <div class="card" v-for="(item, cardIndex) in page"
                             :key="cardIndex">
                            <div class="card-top">
                                <!--                                <div class="card-top-img" :class="getCardClass(item)"></div>-->
                                <img alt="" :src="item.url" :class="getCardClass(item)">
                            </div>
                            <div class="card-bottom">
                                <div class="card-bottom-main">
                                    <div class="card-bottom-top">{{ item.count }}&nbsp;<span>个</span></div>
                                    <div class="card-bottom-center">{{ item.name }}</div>
                                    <div class="card-bottom-bottom">在线率&nbsp;<span>{{ item.online_ratio }}</span>&nbsp;%
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>


<script>
import {heightConfig3} from "@/utils/loadPage";

// 数据集
export default {
    name: 'MyCarousel',
    data() {
        return {
            max_Height: heightConfig3(),
            form: {
                title: '智能在线率',  // 标题
                online_ratio: '95.2',  // 在线率
                page_num: 0, // 总页数，将在计算分页数据时更新
                indicator_position: 'outside', //  指示器位置
                color: '#fff',
                title_color: '#fff',
                dataList: [] // 所有数据
            },
        }
    },
    mounted() {
        this.handleResize()
        // 组件挂载时监听窗口大小变化事件，并设置定时器定时获取支付信息
        window.addEventListener('resize', this.handleResize);
        this.timer = setInterval(this.handleResize, 10000)
    },
    beforeDestroy() {
        // 组件销毁前移除窗口大小变化事件监听，销毁 ECharts 实例，并清除定时器和 sessionStorage
        window.removeEventListener('resize', this.handleResize);
        if (this.myChart) {
            this.myChart.dispose(); // 销毁 ECharts 实例
        }
        clearInterval(this.timer)
        sessionStorage.clear()
    },
    computed: {
        paginatedData() {
            const itemsPerPage = 3; // 每页显示的项目数
            const dataList = this.form.dataList; // 获取数据列表
            const totalItems = dataList.length; // 获取数据总数
            const totalPages = Math.ceil(totalItems / itemsPerPage); // 计算总页数
            this.form.page_num = totalPages; // 更新 form.page_num

            let pages = [];
            for (let i = 0; i < totalPages; i++) {
                let page = [];
                for (let j = 0; j < itemsPerPage; j++) {
                    const index = (i * itemsPerPage + j) % totalItems; // 计算数据索引，实现环形数据展示
                    page.push(dataList[index]); // 将数据添加到当前页
                }
                pages.push(page); // 将当前页添加到分页数组中
            }
            return pages; // 返回分页数据
        }
    },
    methods: {
        getCardClass(item) {
            // 基于当前页码和当前项的索引生成唯一的类名
            console.log(`card-page-${item.id}`)
            return `card-page-${item.id}`;
        },
        handleResize() {
            // 处理窗口大小变化事件，重新获取支付信息
            console.log('Window resized');
            this.max_Height = heightConfig3();
            this.get_data();
        },

        get_data() {
            let daysArray = ['一键通', '血压计', '血糖计', '体脂秤'];
            this.form.dataList = [];
            for (let i = 0; i < daysArray.length; i++) {
                let id = i + 1;
                let name = daysArray[i];
                let count = Math.floor(Math.random() * 20000 + 1000); // 生成 200 到 21000 之间的随机总数
                let online_ratio = Math.floor(Math.random() * 80 + 20); // 生成 20 到 100 之间的随机总数
                let url = '/img/slices/right_top' + (i + 1) + '_logo@2x.png';
                this.form.dataList.push({id, name, count, online_ratio, url}); // 添加到数据源
            }
            this.form.page_num = Math.ceil(this.form.dataList.length / 3);
            this.form.indicator_position = this.form.page_num > 1 ? 'outside' : 'none';
        }
    }

}


</script>

<style scoped lang="scss">
.my-carousel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;


    .title {
        flex: 1;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title-left {
            flex: 1;
            display: flex;
            justify-content: left;
            align-items: center;
            padding-left: 2%;

            img {
                width: 9%;
                padding-right: 2%;
            }
        }

        .title-right {
            flex: 1;
            display: flex;
            justify-content: right;
            align-items: center;
            padding-right: 6%;
            font-size: 16px;
            font-weight: bold;
            color: #37D6AF;

            span {
                font-size: 24px;
            }
        }


    }

    .main {
        flex: 6;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: end;
        //border: #f22477 solid 1px;

        .el-carousel {
            width: 100%;
            height: 100%;

            ::v-deep .el-carousel__container {
                width: 100%;
                height: 86%;

                .el-carousel__item {
                    color: #FFF;
                    font-size: 18px;
                    opacity: 0.75;
                    box-sizing: border-box;
                    width: 100%;
                    height: 100%;
                    //background-color: #03171e;

                    .card-box {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        margin-top: 2%;
                        box-sizing: border-box;

                        .card {
                            width: 29%;
                            height: 90%;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            align-items: center;

                            background-image: url('/public/img/slices/right_top1@2x.png');
                            background-size: 100% 100%; /* 背景图片覆盖整个元素 */
                            background-repeat: no-repeat; /* 防止背景图片重复 */
                            background-position: center center; /* 背景图片居中 */


                            .card-top {
                                flex: 1;
                                width: 100%;
                                height: 100%;
                                display: flex;
                                justify-content: center;
                                align-items: center;

                                //.card-top-img {
                                //    width: 19%;
                                //    height: 42%;
                                //    background-size: 100% 100%; /* 背景图片覆盖整个元素 */
                                //    background-repeat: no-repeat; /* 防止背景图片重复 */
                                //    background-position: center center; /* 背景图片居中 */
                                //    filter: brightness(1.5) contrast(1.2); /* 调整亮度和对比度 */
                                //}

                                img {
                                    width: 35%;
                                    height: 55%;
                                    margin-bottom:5%;
                                    filter: brightness(1.5) contrast(1.2);
                                }

                                .card-page-1 {
                                    width: 20%;
                                    height: 45%;
                                }
                            }

                            .card-bottom {
                                flex: 1;
                                width: 100%;
                                height: 100%;
                                display: flex;
                                justify-content: center;
                                align-items: center;

                                .card-bottom-img {
                                    width: 19%;
                                    height: 42%;
                                }

                                //.card-page-1 {
                                //    background-image: url('/img/slices/right_top1_logo@2x.png');
                                //}
                                //
                                //.card-page-2 {
                                //    width: 33%;
                                //    height: 50%;
                                //    background-image: url('/img/slices/right_top2_logo@2x.png');
                                //}
                                //
                                //.card-page-3 {
                                //    width: 31%;
                                //    height: 47%;
                                //    background-image: url('/img/slices/right_top3_logo@2x.png');
                                //}
                                //
                                //.card-page-4 {
                                //    width: 30%;
                                //    height: 45%;
                                //    background-image: url('/img/slices/right_top4_logo@2x.png');
                                //}

                            }

                            .card-bottom {
                                flex: 1.6;
                                width: 100%;
                                height: 100%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                color: #10E4E5;

                                .card-bottom-main {
                                    width: 100%;
                                    height: 80%;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: space-around;
                                    text-align: center;

                                    .card-bottom-top {
                                        width: 100%;
                                        font-size: 27px;
                                        font-weight: bold;

                                        span {
                                            font-size: 14px;
                                            font-weight: 400;
                                        }
                                    }

                                    .card-bottom-center {
                                        width: 100%;
                                        color: #FFFFFF;
                                        font-size: 20px;
                                    }

                                    .card-bottom-bottom {
                                        width: 100%;
                                        font-size: 13px;

                                        span {
                                            font-size: 18px;
                                            font-weight: bold;
                                        }
                                    }
                                }
                            }

                        }

                    }

                }
            }

            ::v-deep .el-carousel__button {
                width: 36px;
                height: 5px;
                background-color: #71eef9;
            }
        }

    }

}
</style>
